<template>
  <div class="driver">
    <div class="form">
       <el-form ref="form" :model="form" :rules="rule"  label-width="auto"  inline="true" size="mini">
       
            <el-form-item prop="trkNo" label="车牌号：">
              <el-input v-model="form.trkNo" clearable></el-input>
            </el-form-item>
            <el-form-item prop="status" label="审核状态：">
               <el-select v-model="form.status" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="trkType" label="车型：">
              <el-select v-model="form.trkType" style="width:95%" clearable>
                <el-option v-for="(item,index) in carType" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning"></el-option>
              </el-select>
            </el-form-item>
         <el-form-item prop="" label="">
        <el-button type="primary" size="mini" @click="search">查 询</el-button>
            </el-form-item>
    </el-form>
    </div>
    <div class="btn">
      <!-- <el-button plain size="mini" type="success" @click="addCar">新增车辆</el-button>
      <el-button plain size="mini" type="primary" @click="editCar">编辑车辆</el-button>
      <el-button plain size="mini" type="danger" @click="delCar">删除车辆</el-button> -->
      <el-button plain size="mini" type="primary" @click="audit">审核</el-button>
      <el-button plain size="mini" type="warning" @click="cancelAuditA">取消审核</el-button>
    </div>
     <div class="name">车辆列表</div>
    <div class="table" ref="inner">
       <el-table :data="tableData" border
          :height="maxHeight"
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          @row-click="rowClick"
          @row-dblclick="dbrowClick"
          >
        <el-table-column :index="indexMethod" type="index"  align="center" label=" " width="50"></el-table-column>
        <el-table-column align="center" label="审核状态" prop="status" show-overflow-tooltip>
             <template slot-scope="scope">
                <span v-if="scope.row.status != 'Y'">未审核</span>
                <span v-if="scope.row.status =='Y'">已审核</span>
              </template>
          </el-table-column>
        <el-table-column  align="center" prop="zjcz" label="证件操作" show-overflow-tooltip width="180" sortable>
          <template>
            <el-link type="primary" @click="upload" >证件上传</el-link>&nbsp;&nbsp;
            <el-link type="primary" @click="viewPic" >证件查看</el-link>
          </template>
        </el-table-column>
        
        <!-- <el-table-column  align="center" prop="clzt" label="车辆状态" show-overflow-tooltip width="130" sortable></el-table-column> -->
        <el-table-column  align="right" prop="trkNo" label="车牌号" show-overflow-tooltip width="130" sortable></el-table-column>
        <el-table-column  align="right" prop="trkDrvName" label="司机" show-overflow-tooltip width="140" sortable></el-table-column>
        <el-table-column  align="right" prop="trkConductor" label="车长" show-overflow-tooltip width="140" sortable></el-table-column>
        <el-table-column  align="left" prop="trkTypeName" label="车型" show-overflow-tooltip width="120" sortable></el-table-column>
        <el-table-column  align="left" prop="trkColor" label="车辆颜色 " show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="left" prop="trkAxlenumberName" label="车轴数" show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="right" prop="trkTonnage" label="载重吨(T) " show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="left" prop="trkUsercharacter" label="使用性质" show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="left" prop="trkIssuingorg" label="发证机关" show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="left" prop="trkRtcn" label="道路运输证号" show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="left" prop="trkRegisterdate" label="注册日期  " show-overflow-tooltip width="140" sortable></el-table-column>
        <el-table-column  align="left" prop="trkIssuedate" label="发证日期  " show-overflow-tooltip width="180" sortable></el-table-column>
        <el-table-column  align="right" prop="trkGrossmass" label="总质量(T)" show-overflow-tooltip width="130" sortable></el-table-column>
        <el-table-column  align="left" prop="creator" label="创建人" show-overflow-tooltip width="130" sortable></el-table-column>
        <el-table-column  align="center" prop="created" label="创建时间" show-overflow-tooltip width="130" sortable></el-table-column>
        <el-table-column  align="left" prop="lastmodifier" label="最后修改人" show-overflow-tooltip width="130" sortable></el-table-column>
        <el-table-column  align="center" prop="lastmodified" label="最后修改时间" show-overflow-tooltip width="130" sortable></el-table-column>
        <el-table-column  align="center" prop="trkVlflag" label="是否有效" show-overflow-tooltip width="120" sortable>
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.trkVlflag" true-label="Y" false-label="N" :disabled="true"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column  align="left" prop="trkRemark" label="备注" show-overflow-tooltip width="120" sortable></el-table-column>
       </el-table>
    </div>
    <div class="pages">
       <el-pagination
      ref="pagination"
      small
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total">
    </el-pagination>
    </div>
    <!-- 对话框 新增 编辑车辆 -->
     <el-dialog
    :title="name"
    :visible.sync="openDialog"
    v-if="openDialog"
    v-el-drag-dialog
    :before-close="close"
    :close-on-click-modal="false"
     >
     <el-form :model="dialogForm" size="mini" :rules="dialogRule"  ref="dialogForm" label-width="auto">
       <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="trkNo" label="车牌号：">
              <el-input v-model="dialogForm.trkNo" style="width:95%"  clearable :disabled="see" maxlength="32">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="trkDriverUuid" label="司机姓名：" >
                <el-select v-model="dialogForm.trkDriverUuid" style="width:95%" clearable :disabled="see" filterable>
                <el-option v-for="(item,index) in driver" :key="index" :value="item.uuid" :label="item.dvrName"></el-option>
              </el-select>
              
            </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="trkConductor" label="车长：">
                <el-select v-model="dialogForm.trkConductor" style="width:95%" clearable :disabled="see" filterable>
                <el-option v-for="(item,index) in carLong" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="trkType" label="车型：" >
              <el-select v-model="dialogForm.trkType" style="width:95%" clearable :disabled="see" filterable>
                 <el-option v-for="(item,index) in carType" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="trkOwner" label="所有人：">
              <el-input v-model="dialogForm.trkOwner" style="width:95%" maxlength="32" clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="trkGrossmass" label="总质量(t)：" >
              <el-input v-model="dialogForm.trkGrossmass" style="width:95%" maxlength="32" clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="trkTonnage" label="载重吨：">
              <el-input v-model="dialogForm.trkTonnage" style="width:95%" maxlength="32" clearable :disabled="see"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="trkColorcode" label="车牌颜色代码：" >
               <el-select v-model="dialogForm.trkColorcode" style="width:95%" clearable :disabled="see">
                <el-option v-for="(item,index) in carColor" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="trkUsercharacter" label="使用性质：">
              <el-input v-model="dialogForm.trkUsercharacter" style="width:95%" maxlength="32" clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="trkVin" label="车辆识别代码：	" >
              <el-input v-model="dialogForm.trkVin" style="width:95%" maxlength="27" clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"> 
            <el-form-item prop="trkIssuingorg" label="发证机关：">
              <el-input v-model="dialogForm.trkIssuingorg" style="width:95%" maxlength="32" clearable :disabled="see">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="trkRegisterdate" label="注册日期：" >
              <el-date-picker v-model="dialogForm.trkRegisterdate" style="width:95%" clearable :disabled="see" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="trkIssuedate" label="发证日期：">
              <el-date-picker v-model="dialogForm.trkIssuedate" style="width:95%" clearable :disabled="see" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="trkEnergytype" label="车辆能源类型：" >
              <el-input v-model="dialogForm.trkEnergytype" style="width:95%" clearable  :disabled="see" maxlength="16"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="trkAxlenumber" label="车辆轴数：">
              <el-select v-model="dialogForm.trkAxlenumber" style="width:95%" clearable :disabled="see" filterable>
                <el-option v-for="(item,index) in carAxel" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="12">
              <el-form-item prop="trkVlflag" label="是否有效">
                <el-radio-group v-model="dialogForm.trkVlflag" :disabled="see" style="width:95%">
                  <el-radio label="Y">是</el-radio>
                  <el-radio label="N">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-form-item prop="trkRtcn" label="道路运输证号：" >
              <el-col :span="24">
              <el-input v-model="dialogForm.trkRtcn" style="width:98%" clearable  :disabled="see" maxlength="14"></el-input>
              </el-col>
            </el-form-item>
        </el-row>
        <el-row :gutter="24">
            <el-form-item prop="trkEnginenumber" label="发动机号：">
              <el-col :span="24">
               <el-input  v-model="dialogForm.trkEnginenumber" style="width:98%" clearable  :disabled="see" maxlength="32"></el-input>
                 </el-col>
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-form-item prop="trkTvpn" label="挂车牌照号：" >
               <el-col :span="24">
              <el-input  v-model="dialogForm.trkTvpn" :rows="2" style="width:98%" :disabled="see" maxlength="32"></el-input>
               </el-col>
            </el-form-item>
        </el-row>
         <!-- <el-row :gutter="20">
            <el-form-item prop="trkVlflag" label="使用否">
              <el-col :span="20">
               <el-radio-group v-model="dialogForm.trkVlflag" :disabled="see">
                 <el-radio label="Y">是</el-radio>
                 <el-radio label="N">否</el-radio>
               </el-radio-group>
              </el-col>
            </el-form-item>
          </el-row> -->
          <el-row :gutter="24">
            <el-form-item prop="trkRemark" label="备注：" >
               <el-col :span="24">
              <el-input type="textarea" v-model="dialogForm.trkRemark" :rows="2" style="width:98%" maxlength="200" :disabled="see"></el-input>
               </el-col>
            </el-form-item>
        </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer" >
      <el-button type="primary" @click="save" v-if="!see" size="mini">保存</el-button>
      <el-button  @click="close" size="mini">关闭</el-button>
      </div>
     </el-dialog>
    <!-- 对话框 证件上传 查看 -->
    <el-dialog
    :title="title"
    width="30%"
    :visible.sync="openUpload"
    v-if="openUpload"
    v-el-drag-dialog
    :before-close="closeUpload"
    :close-on-click-modal="false"
    append-to-body
     >
       <div class="box" v-if="!pic">
         <div class="selectItem">
           <el-select v-model="issuse">
             <el-option v-for="(item,index) in list" :key="index" :value="item.code" :label="item.name"></el-option>
           </el-select>
         </div>
         <div class="upload">
            <el-upload
              action=""
              :http-request="uploadImage"
              :before-upload="beforeUpload"
              :show-file-list="false"
              class="upload-demo">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
            </el-upload>
         </div>
       </div>
       <div class="pic" v-else><img src="" alt="查看图片"></div>
      <div slot="footer" class="dialog-footer" >
      <el-button  @click="closeUpload" size="mini">关闭</el-button>
      </div>
     </el-dialog>
  </div>
</template>
<script>
import paginationMixin from '@/mixins/pagination'
import resizeMixin from '@/mixins/resize'
import {getDriveraisauditList,getRefCodesByType,getVehicleModelListA,auditCarMethodA} from '@/request/api'
export default {
  name:'router.VehicleAudit',
  mixins:[paginationMixin,resizeMixin],
  data(){
    return{
      form:{
        trkNo:'',
        status:'',
        trkType:''
      },
      //审核状态选择
       options: [{
          value: 'Y',
          label: '已审核'
        }, {
          value: 'N',
          label: '未审核'
        }],
        value:'',
      carType:[{code:'1',name:'货车'}],
      maxHeight:-1,
      tableData:[],
      currentData:{},
      issuse:'',
      list:[{code:'tx',name:'头像'},{code:'sfzz',name:'身份证正面'},{code:'sfzb',name:'身份证反面'},{code:'jsz',name:'驾驶证'}],
      // 车辆对话框
      name:'',
      openDialog:false,
      dialogForm:{},
      dialogRule:{
        trkNo:[{required:true,message:'请输入车牌号',trigger:'blur'}],
        trkDriverUuid:[{required:true,message:'请选择司机',trigger:'blur'}],
        trkConductor:[{required:true,message:'请输入车长',trigger:'blur'}],
        trkType:[{required:true,message:'请输入车型',trigger:'blur'}],
        trkOwner:[{required:true,message:'请输入所有人',trigger:'blur'}],
        trkGrossmass:[{required:true,message:'请输入总质量',trigger:'blur'},
          {
            pattern:/^\d+$|^(\d+)(\.\d+)?$/,
            message:'请输入阿拉伯数字',
            trigger:'blur'
          }
        ],
        trkTonnage:[{required:true,message:'请输入载重吨',trigger:'blur'},
          {
            pattern:/^\d+$|^(\d+)(\.\d+)?$/,
            message:'请输入阿拉伯数字',
            trigger:'blur'
          }],
        trkColorcode:[{required:true,message:'请输入车辆颜色',trigger:'blur'}],
        trkUsercharacter:[{required:true,message:'请输入使用性质',trigger:'blur'}],
        trkVin:[{required:false,message:'请输入车辆识别码',trigger:'blur'}],
        trkIssuingorg:[{required:true,message:'请输入发证机关',trigger:'blur'}],
        trkRegisterdate:[{required:true,message:'请输入注册日期',trigger:'blur'}],
        trkIssuedate:[{required:true,message:'请输入发证日期',trigger:'blur'}],
        trkEnergytype:[{required:true,message:'请输入车辆能源类型',trigger:'blur'}],
        trkAxlenumber:[{required:true,message:'请输入车轴数',trigger:'blur'}],
        trkRtcn:[{required:true,message:'请输入道路运输证号',trigger:'blur'}],
        trkEnginenumber:[{required:true,message:'请输入发动机号',trigger:'blur'}],
        trkTvpn:[{required:false,message:'请输入挂车牌照号',trigger:'blur'}],
        // sy:[{required:true,message:'请输入',trigger:'blur'}],

      },
      edit:false,// 编辑模式
      see:false,//查看模式
      carLong:[],//车长
      carAxel:[],//车轴
      driver:[],//司机
      carColor:[],//车辆颜色
      //上传、查看图片对话框
      openUpload:false,
      pic:false,
      title:'上传证件'
    }
  },
  created(){
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.refreshList(),
    //车型
    getRefCodesByType('车型_网络').then(res=>{
      if(res.success==='1'){
        this.carType=res.data
       
      }
    })
    //车长
    getRefCodesByType('车长_网络').then(res=>{
      if(res.success==='1'){
        this.carLong=res.data
      }
    })
    //车轴
    getRefCodesByType('车辆轴数').then(res=>{
      if(res.success==='1'){
        this.carAxel=res.data
      }
    })
    //车辆颜色
    getRefCodesByType('车辆颜色').then(res=>{
      if(res.success==='1'){
        this.carColor=res.data
      }
    })
    //司机
    getDriveraisauditList({
      dvrName:'',
      PageIndexs:'',
      PageSizes: '',
      isaudit: '1'
    }).then(res=>{
      if(res.success==='1'){
        this.driver=res.data
      } 
    })
  },
  methods:{
    //查询
    search(){
      this.$refs.form.validate(valid=>{
        if(valid){
          this.refreshList()
        }
      })
    },

    getList(currentPage, pageSize, updateTotal){
      getVehicleModelListA({
        trkNo:this.form.trkNo,
        trkType:this.form.trkType, 
        status:this.form.status,
        PageIndexs: currentPage.toString(),
        PageSizes: pageSize.toString()
      }).then(response => {
        this.tableData = response.data
        updateTotal(Number(response.total))
      })
    },
    // 上传图片
    uploadImage ({ file }) {
      console.log(file)
    },
    // 图片上传之前的检查
    beforeUpload(file) {
      if (file.type.indexOf('image') === -1) {
        this.$message.error({
          message: '请上传正确的图片类型',
          showClose: true
        })
        return false
      }

      if (file.size / 1024 / 1024 > this.size) {
        this.$message.warning({
          message: '建议文件大小在5M以内',
          showClose: true
        })
        return false
      }
    },
    //证件查看
    viewPic(){
      this.openUpload=true
      this.title='查看证件'
      this.pic=true
    },
    //证件上传
    upload(){
      this.openUpload=true
      this.title='上传证件'
      this.pic=false
    },
    //双击查看啊详情
    dbrowClick(row){
      this.openDialog=true
      this.see=true
      this.edit=true
      this.dialogForm=Object.assign({},row)
    },
    //单击行
    rowClick(row){
      this.currentData=Object.assign({},row)
    },
   
    //删除车辆
    delCar(){
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要删除的数据！','提示',{
          confirmButtonText:'确定'
        })
        return
      }
      this.$confirm('您确定要删除该数据吗？','提示',{
        confirmButtonText:'确定'
      }).then(()=>{
        delVehicleModel({uuid:this.currentData.uuid}).then(res=>{
          if(res.success==='1'){
            this.$message({
              type:'success',
              message:'删除成功',
              showClose:true
            })
            this.close()
          }
        })
      })
    },

    // 审核
    audit() {
      //1.先判断是否已审核 2.执行审核
      console.log(this.currentData)
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要审核的数据！','提示',{
          confirmButtonText:'确定'
        })
        return
      }
      if(this.currentData.status === 'Y'){
        this.$alert('请选择未审核的数据！','提示',{
          confirmButtonText:'确定'
        })
        return
      }

      this.$confirm('您确定要审核该数据吗？','提示',{
        confirmButtonText:'确定'
      }).then(()=>{
        auditCarMethodA({uuid:this.currentData.uuid,status:'Y'}).then(res=>{
          if(res.success==='1'){
            this.$message({
              type:'success',
              message:'审核成功',
              showClose:true
            })
            this.close()
          }
        })
      })
    },

    // 取消审核
    cancelAuditA() {
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要取消审核的数据！','提示',{
          confirmButtonText:'确定'
        })
        return
      }

      if(this.currentData.status === 'N'){
        this.$alert('请选择已审核的数据！','提示',{
          confirmButtonText:'确定'
        })
        return
      }

      this.$confirm('您确认要取消审核此数据吗?', '提示', {
        confirmButtonText:'确定'
      }).then(()=>{
        auditCarMethodA({uuid:this.currentData.uuid,status:'N'}).then(res=>{
          if(res.success==='1'){
            this.$message({
              type:'success',
              message:'取消审核成功',
              showClose:true
            })
            this.close()
          }
        })
      })
    },

    //保存
    save(){
      this.$refs.dialogForm.validate(valid=>{
        if(valid){
          if(this.edit){
            //编辑
            editVehicleModel(this.dialogForm).then(res=>{
              if(res.success==='1'){
                this.$message({
                  type:'success',
                  message:'编辑数据成功！',
                  showClose:true
                })
                this.close()
              }
            })
          }else{
            //新增
            addVehicleModel(this.dialogForm).then(res=>{
              if(res.success==='1'){
                this.$message({
                  type:'success',
                  message:'新增数据成功！',
                  showClose:true
                })
                this.close()
              }
            })
          }
        }
      })
    },
    //编辑车辆
    editCar(){
      //1.先判断是否已审核 2.执行编辑
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要编辑的数据！','提示',{
          confirmButtonText:'确定'
        })
        return
      }
      this.openDialog=true
      this.see=false
      this.edit=true
      this.name='编辑车辆信息'
      this.dialogForm=Object.assign({},this.currentData)
    },
    //新增车辆
    addCar(){
      this.openDialog=true
      this.see=false
      this.edit=false
      this.name='新增车辆信息'
      this.dialogForm={
        trkNo:'',
        trkDriverUuid:'',
        trkConductor:'',
        trkType:'',
        trkOwner:'',
        trkGrossmass:'',
        trkTonnage:'',
        trkColorcode:'',
        trkUsercharacter:'',
        trkVin:'',
        trkIssuingorg:'',
        trkRegisterdate:'',
        trkIssuedate:'',
        trkEnergytype:'',
        trkAxlenumber:'',
        trkRtcn:'',
        trkEnginenumber:'',
        trkTvpn:'',
        trkVlflag:'Y',
        bz:''
      }
    },
    //关闭上传对话框
    closeUpload(){
      this.openUpload=false
    },
    //关闭车辆对话框
    close(){
      this.openDialog=false
      this.currentData={}
      this.refreshList()
    }
  }
}
</script>
<style lang="scss" scoped>
.driver{
  width:100%;
  height:100%;
  padding:15px 15px 12px;
  display:flex;
  flex-direction:column;
  .form{
    height:30px;
  }
  .btn{
    height:50px;
    line-height:50px;
  }
  .name{
    font-size:16px;
    line-height:20px;
    font-weight:500;
  }
  .table{
    flex:1;
  }
  .pages{
    height:30px;
  }

  .box{  //上传对话框
  overflow:hidden;
  height: 200px;
    .selectItem{
      // float:right;
      display:inline-block;
      width:50%;
      height:100%;
      box-sizing: border-box;
      padding:20px;
    }
    .upload{
      // float:right;
      display:inline-block;
      width:50%;
      height:100%;
      box-sizing: border-box;
      padding:20px;
    }
  }
}

</style>